<template>
  <van-nav-bar
    title="订单结算"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-contact-card
    type="edit"
    :tel="currentContact.tel"
    :name="currentContact.name"
  />
  <div class="content">
    <div v-for="item in orderList" :key="item.title">
      <van-card
        :num="item.num"
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
      />
    </div>
    <van-submit-bar :price="countPrice" button-text="提交订单"    button-color="#ffc400" @submit="onSubmit">
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { reactive, toRefs, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    let data = reactive({
      currentContact: {
        name: "吴鸿卓",
        tel: "13227172517",
      },
    });
    const onSubmit = () =>{
      router.push('./order')
    }
    
    const init=()=>{
      store.state.countAbout.userAddress.map((item)=>{
        if(item.isDefault){
          data.currentContact=item
        }
      })
    }
    const orderList = computed(() => {
      return store.state.countAbout.orderList;
    });
    const countPrice=computed(()=>{
        let count=0
        orderList.value.map((item)=>{
            count += item.price*item.num
        })
         return count*100
    })
    const onClickLeft = () => {
      router.go(-1);
    }
    onMounted(()=>{
      init()
    })
    return {
      onClickLeft,
      ...toRefs(data),
      onSubmit,
      orderList,
      countPrice
    };
  },
};
</script>

<style>
</style>